<%--
  Created by IntelliJ IDEA.
  User: 您的名字
  Version: 1.0
 --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>EasyUI CRUD 示例页面</title>
    <meta charset="UTF-8">
    <base href="<%=request.getContextPath()%>/">
    <!-- 引入 EasyUI 的默认主题样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/bootstrap/easyui.css">
    <!-- 引入 EasyUI 的图标样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/icon.css">
    <!-- 引入自定义的公共CSS -->
    <link rel="stylesheet" type="text/css" href="static/css/common.css"/>
    <!-- 引入 EasyUI 默认的 jQuery（无需单独引入 jQuery） -->
    <script src="static/js/easyui/jquery.min.js"></script>
    <!-- 引入 EasyUI 的核心 JS 文件 -->
    <script src="static/js/easyui/jquery.easyui.min.js"></script>
    <!-- 引入 EasyUI 的中文语言包 -->
    <script src="static/js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/common.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/dataGrid.js"></script>
    <script src="static/js/owner/moment.min.js"></script>
    <!-- daterangepicker 是一个日期范围选择插件，支持选择开始和结束日期 -->
    <link rel="stylesheet" href="static/css/daterangepicker.css">
    <!-- 引入 daterangepicker 的脚本文件 -->
    <script src="static/js/owner/daterangepicker.js"></script>
</head>
<style>
    .searchDiv {
        /*border: 1px red solid;*/
        display: flex;           /* 启用Flex布局 */
        flex-direction: row;
        gap: 20px;              /* 项目间距 */
        margin: 20px 10px 5px 10px;
        flex-wrap: wrap;
    }
    .operationBtn {
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .item {
        display: flex;          /* 启用Flex布局 */
        align-items: center;    /* 垂直居中 */
        gap: 10px;              /* 项目间距 */
    }
    label {/*标签列对齐*/
        font-weight: bold;
    }
</style>
<body>
<div id="toolbar">
    <!-- 查询表单 -->
    <form id="searchForm">
        <div class="searchDiv">
            <div class="item">
                <label>字典标签:</label>
                <input name="dictLabel" class="easyui-textbox">
            </div>
            <div class="searchBtn">
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" onclick="searchData({setValues: {dictType : dictType}})">查询</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="resetSearch({setValues: {dictType : dictType}})">重置</a>
            </div>
        </div>
    </form>
    <!-- 操作按钮 -->
    <div class="operationBtn">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="openDialog()">新增</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editDialog()">编辑</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteData()">删除</a>
    </div>
</div>

<!-- 数据表格 -->
<table id="datagrid" class="easyui-datagrid">
    <thead>
    <tr>
        <!-- 复选框 -->
        <th data-options="field:'ck',checkbox:true"></th>
        <th data-options="field:'dictCode',width:100">字典编码</th>
        <th data-options="field:'dictLabel',width:200">字典标签</th>
        <th data-options="field:'dictValue',width:120">字典键值</th>
        <th data-options="field:'remark',width:100">备注</th>
        <th data-options="field:'createTime',width:150,sortable:true, formatter:formatDate">创建时间</th>
    </tr>
    </thead>
</table>

<div id="dlg" class="easyui-dialog" style="width:800px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
    <form id="fm" method="post" novalidate>
        <div class="item">
            <label>字典标签:</label>
            <input name="dictLabel" class="easyui-textbox" required="true">
        </div>
        <div class="item">
            <label>字典键值:</label>
            <input name="dictValue" class="easyui-textbox" required="true">
        </div>
        <div class="item">
            <label>备注:</label>
            <input name="remark" class="easyui-textbox" multiple required="true">
        </div>
    </form>

    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveDialog()">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
    </div>
</div>


</body>

<!-- 定义页面脚本 -->
<script type="text/javascript">
    var url;
    var dictType = parent.dictType;

    $(function () {
        const pageConfig = {
            url: 'sysDictData/getData',
            queryParams: {dictType},
            emptyMsg: '暂无数据',
        }

        // 初始化数据表格
        initializeDataGrid(pageConfig);
    });

    function openDialog() {
        $('#dlg').dialog('open').dialog('setTitle', '新增').window('center');
        $('#fm').form('clear');
        url = 'sysDictData/save?dictType=' + dictType;
    }


    function saveDialog() {
        $('#fm').form('submit', {
            url: url,
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                var result = eval('(' + result + ')');
                if (result.code == 200) {
                    $('#dlg').dialog('close');
                    $('#datagrid').datagrid('reload');
                } else {
                    $.messager.show({
                        title: '错误',
                        msg: result.msg
                    });
                }
            }
        });
    }

    function editDialog() {
        var row = $('#datagrid').datagrid('getSelected');
        if (row) {
            $('#dlg').dialog('open').dialog('setTitle', '编辑').window('center');
            $('#fm').form('load', row);
            url = 'sysDictData/update?dictCode=' + row.dictCode;
        } else {
            $.messager.alert('提示', '请选择要编辑的记录！', 'info');
        }
    }

    function deleteData() {
        var row = $('#datagrid').datagrid('getSelected');
        if (row) {
            $.messager.confirm('确认', '确定要删除该记录吗？', function(r) {
                if (r) {
                    $.post('sysDictData/delete', {dictCode: row.dictCode}, function(result) {
                        if (result.code == 200) {
                            $('#datagrid').datagrid('reload');
                        } else {
                            $.messager.show({
                                title: '错误',
                                msg: result.msg
                            });
                        }
                    }, 'json');
                }
            });
        } else {
            $.messager.alert('提示', '请选择要删除的记录！', 'info');
        }
    }


</script>
</body>
</html>
